<template>
  <view class="box">
    <view
      class="btn"
      @click="goodLuck"
    >
      摇号
    </view>
    <view class="luck_list">
      <view
        class="list_item"
        v-for="(subArray, index) in state.luckList"
        :key="index"
      >
        <view
          v-for="(item, subIndex) in subArray.BallsList"
          :key="subIndex"
        > 
  		<view class="mini_item">
  			 <view :class="[subIndex === subArray.BallsList.length - 1?'min_box_sct':'min_box']">
  			 	  {{item}}
  			 </view> 
  		</view>  
          
        </view>
        <view
          class="copy_txt"
          @click="copyItem(subArray.BallsList)"
        >
          复制
        </view>
      </view>
    </view>
  
    <view @click="copyAll" class="eco-button"> 全部复制 </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';

const state = reactive({
  luckList: [],
});
//摇号
const goodLuck = () => {
  // 生成红球（1到33之间的6个不同的数字）
  const redBalls = new Set();
  while (redBalls.size < 6) {
    redBalls.add(Math.floor(Math.random() * 33) + 1);
  }

  // 将 Set 转换成数组并排序
  const sortedRedBalls = Array.from(redBalls).sort((a, b) => a - b);
  
  // 生成蓝球（1到16之间的1个数字）
  const blueBall = Math.floor(Math.random() * 16) + 1;

  // 将结果推入luckList中
 state.luckList.push({
   BallsList: [...sortedRedBalls,blueBall] 
 });

  console.log("摇号结果:", [blueBall]);
};

// 单独复制
const copyItem = async item => {
	
  await uni.setClipboardData({
    data: item.join('\n'),
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success',
      });
    },

    fail: () => {
      uni.showToast({
        title: '复制失败!',
        icon: 'none',
      });
    },
  });
};
//全部复制
const copyAll = async () => {
	let str = ""
	  state.luckList.flatMap((item)=>{
		  str+=item.BallsList.join('\n')
	  })
  await uni.setClipboardData({
    data: str,
    success: () => {
      uni.showToast({
        title: '已全部复制',
        icon: 'success',
      });
    },

    fail: () => {
      uni.showToast({
        title: '全部复制失败!',
        icon: 'none',
      });
    },
  });
};
</script>

<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.eco-button {
  padding: 24rpx 48rpx; /* 按钮内边距 */
  background: linear-gradient(145deg, #ffd700, #ffcc00); /* 渐变色 */
  border: none; /* 去除默认边框 */
  border-radius: 60rpx; /* 圆角 */
  color: white; /* 文字颜色 */
  font-size: 32rpx; /* 字体大小 */
  text-align: center; /* 文字居中 */
  cursor: pointer; /* 鼠标变成手形 */
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: all 0.3s ease; /* 动画过渡 */
}

.eco-button:hover {
  background: linear-gradient(145deg, #ffd700, #ffcc00); /* 鼠标悬停时渐变方向反转 */
  transform: translateY(-6rpx); /* 向上偏移 */
  box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.15); /* 鼠标悬停时更强的阴影效果 */
}

.eco-button:active {
  transform: translateY(4rpx); /* 按钮点击时稍微下沉 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 点击时阴影减小 */
}
.list_item {
  width: 600rpx;
  display: flex;
  align-items: center;
 justify-content: center;
  .mini_item {
   display: flex;
	
	.min_box{
		width: 100rpx;  
		height: 100rpx;
		border-radius: 50%;
		line-height: 50rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		font-weight: 700;
		font-family: baidunumber-Medium;
		background-image: linear-gradient(180deg, #FE8A5C 0%, #FF4D4D 100%);
		background-size: contain;
		background-repeat: no-repeat;  
		margin-right: 5rpx; 
		margin-bottom: 10rpx;  
	}
	.min_box_sct{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		line-height: 50rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		font-weight: 500;
		background: #22a6f2;
		margin-right: 5rpx;
		margin-bottom: 10rpx;
	}
  }
  .copy_txt {
    font-size: 24rpx;
    color: #ff5800;
    margin-left: 30rpx;
  }
  .blue {
    color: blue;
  }
  .red {
    color: red;
  }
}
.btn {
  width: 150rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  border: 1rpx solid red;
  background-color: red;
  border-radius: 15rpx;
  color: #fff;
  margin: 50rpx 0;
}
</style>
